import React from 'react'
import './index.css'
export default class D3Test extends React.Component{
    componentDidMount () {
        let BMap = window.BMap
        let map = new BMap.Map("mapContainer"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(118.778, 32.057), 9); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.setCurrentCity("南京"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.setMapStyle({
            styleJson:[
                {
                    "featureType": "road",
                    "elementType": "all",
                    "stylers": {
                        "color": "#ffffff",
                        "visibility": "off"
                    }
                },
    
            ]
        });
       let canvas = document.getElementById('canvas')
       if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
        //椭圆
        ctx.fillRect (100, 42, 75, 30);
        ctx.beginPath();
        //三角
        ctx.moveTo(75, 50);
        ctx.lineTo(100, 65);
        ctx.lineTo(100, 35);
        ctx.closePath();
        ctx.stroke();
        //圆
        

      }
      }
    render() {
        return (
            <div>
                <canvas id="canvas" style={{position:'absolute',top:'28%',zIndex:'9999'}}></canvas>
            <div className='' id='mapContainer' style = {{backgroundColor:"#fff",width:'1400px',height:'500px'}}>
            
            </div>
            </div>
        )
    }
}